29 Αυγούστου 2025Ελληνικά

Αξιοποιήστε τους Βοηθούς Ασύγχρονων Γεννητριών JavaScript για αποδοτική δημιουργία και διαχείριση ροών. Εξερευνήστε παραδείγματα για ισχυρές ασύγχρονες εφαρμογές.

Βοηθοί Ασύγχρονων Γεννητριών JavaScript: Εξειδίκευση στη Δημιουργία και Διαχείριση Ροών

Ο ασύγχρονος προγραμματισμός στη JavaScript έχει εξελιχθεί σημαντικά με την πάροδο των ετών. Με την εισαγωγή των Ασύγχρονων Γεννητριών (Async Generators) και των Ασύγχρονων Επαναληπτών (Async Iterators), οι προγραμματιστές απέκτησαν ισχυρά εργαλεία για τον χειρισμό ροών ασύγχρονων δεδομένων. Τώρα, οι Βοηθοί Ασύγχρονων Γεννητριών της JavaScript ενισχύουν περαιτέρω αυτές τις δυνατότητες, παρέχοντας έναν πιο βελτιωμένο και εκφραστικό τρόπο δημιουργίας, μετασχηματισμού και διαχείρισης ασύγχρονων ροών δεδομένων. Αυτός ο οδηγός εξερευνά τις βασικές αρχές των Βοηθών Ασύγχρονων Γεννητριών, εμβαθύνει στις λειτουργίες τους και επιδεικνύει τις πρακτικές τους εφαρμογές με σαφή παραδείγματα.

Κατανόηση των Ασύγχρονων Γεννητριών και Επαναληπτών

Πριν εμβαθύνουμε στους Βοηθούς Ασύγχρονων Γεννητριών, είναι κρίσιμο να κατανοήσουμε τις υποκείμενες έννοιες των Ασύγχρονων Γεννητριών και των Ασύγχρονων Επαναληπτών.

Ασύγχρονες Γεννήτριες

Μια Ασύγχρονη Γεννήτρια είναι μια συνάρτηση που μπορεί να τεθεί σε παύση και να συνεχιστεί, παράγοντας τιμές ασύγχρονα. Σας επιτρέπει να δημιουργήσετε μια ακολουθία τιμών με την πάροδο του χρόνου, χωρίς να μπλοκάρετε το κύριο νήμα (main thread). Οι Ασύγχρονες Γεννήτριες ορίζονται χρησιμοποιώντας τη σύνταξη async function*.

Παράδειγμα:


async function* generateSequence(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 500)); // Προσομοίωση ασύγχρονης λειτουργίας
    yield i;
  }
}

// Χρήση
const sequence = generateSequence(1, 5);

Ασύγχρονοι Επαναλήπτες

Ένας Ασύγχρονος Επαναλήπτης είναι ένα αντικείμενο που παρέχει μια μέθοδο next(), η οποία επιστρέφει μια υπόσχεση (promise) που επιλύεται σε ένα αντικείμενο που περιέχει την επόμενη τιμή στην ακολουθία και μια ιδιότητα done που υποδεικνύει εάν η ακολουθία έχει εξαντληθεί. Οι Ασύγχρονοι Επαναλήπτες καταναλώνονται χρησιμοποιώντας βρόχους for await...of.

Παράδειγμα:


async function* generateSequence(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 500));
    yield i;
  }
}

async function consumeSequence() {
  const sequence = generateSequence(1, 5);
  for await (const value of sequence) {
    console.log(value);
  }
}

consumeSequence();

Εισαγωγή στους Βοηθούς Ασύγχρονων Γεννητριών

Οι Βοηθοί Ασύγχρονων Γεννητριών είναι ένα σύνολο μεθόδων που επεκτείνουν τη λειτουργικότητα των πρωτοτύπων των Ασύγχρονων Γεννητριών. Παρέχουν βολικούς τρόπους για το χειρισμό ασύγχρονων ροών δεδομένων, καθιστώντας τον κώδικα πιο ευανάγνωστο και συντηρήσιμο. Αυτοί οι βοηθοί λειτουργούν νωθρά (lazily), πράγμα που σημαίνει ότι επεξεργάζονται δεδομένα μόνο όταν χρειάζεται, γεγονός που μπορεί να βελτιώσει την απόδοση.

Οι ακόλουθοι Βοηθοί Ασύγχρονων Γεννητριών είναι συνήθως διαθέσιμοι (ανάλογα με το περιβάλλον JavaScript και τα polyfills):

map
filter
take
drop
flatMap
reduce
toArray
forEach

Λεπτομερής Εξερεύνηση των Βοηθών Ασύγχρονων Γεννητριών

1. `map()`

Ο βοηθός map() μετασχηματίζει κάθε τιμή στην ασύγχρονη ακολουθία εφαρμόζοντας μια παρεχόμενη συνάρτηση. Επιστρέφει μια νέα Ασύγχρονη Γεννήτρια που παράγει τις μετασχηματισμένες τιμές.

Σύνταξη:


asyncGenerator.map(callback)

Παράδειγμα: Μετατροπή μιας ροής αριθμών στα τετράγωνά τους.


async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  const squares = numbers.map(async (num) => {
    await new Promise(resolve => setTimeout(resolve, 100)); // Προσομοίωση ασύγχρονης λειτουργίας
    return num * num;
  });

  for await (const square of squares) {
    console.log(square);
  }
}

processNumbers();

Πραγματική Περίπτωση Χρήσης: Φανταστείτε να ανακτάτε δεδομένα χρηστών από πολλαπλά API και να χρειάζεται να μετασχηματίσετε τα δεδομένα σε μια συνεπή μορφή. Η map() μπορεί να χρησιμοποιηθεί για να εφαρμόσει μια συνάρτηση μετασχηματισμού σε κάθε αντικείμενο χρήστη ασύγχρονα.


async function* fetchUsersFromMultipleAPIs(apiEndpoints) {
  for (const endpoint of apiEndpoints) {
    const response = await fetch(endpoint);
    const data = await response.json();
    for (const user of data) {
      yield user;
    }
  }
}

async function processUsers() {
  const apiEndpoints = [
    'https://api.example.com/users1',
    'https://api.example.com/users2'
  ];

  const users = fetchUsersFromMultipleAPIs(apiEndpoints);

  const normalizedUsers = users.map(async (user) => {
    // Κανονικοποίηση της μορφής δεδομένων χρήστη
    return {
      id: user.userId || user.id,
      name: user.fullName || user.name,
      email: user.emailAddress || user.email
    };
  });

  for await (const normalizedUser of normalizedUsers) {
    console.log(normalizedUser);
  }
}

2. `filter()`

Ο βοηθός filter() δημιουργεί μια νέα Ασύγχρονη Γεννήτρια που παράγει μόνο τις τιμές από την αρχική ακολουθία που ικανοποιούν μια παρεχόμενη συνθήκη. Σας επιτρέπει να συμπεριλάβετε επιλεκτικά τιμές στην προκύπτουσα ροή.

Σύνταξη:


asyncGenerator.filter(callback)

Παράδειγμα: Φιλτράρισμα μιας ροής αριθμών για να συμπεριληφθούν μόνο οι ζυγοί αριθμοί.


async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 10);
  const evenNumbers = numbers.filter(async (num) => {
    await new Promise(resolve => setTimeout(resolve, 100));
    return num % 2 === 0;
  });

  for await (const evenNumber of evenNumbers) {
    console.log(evenNumber);
  }
}

processNumbers();

Πραγματική Περίπτωση Χρήσης: Επεξεργασία μιας ροής καταχωρήσεων αρχείου καταγραφής (log) και φιλτράρισμα των καταχωρήσεων με βάση το επίπεδο σοβαρότητάς τους. Για παράδειγμα, η επεξεργασία μόνο σφαλμάτων και προειδοποιήσεων.


async function* readLogFile(filePath) {
  // Προσομοίωση ασύγχρονης ανάγνωσης ενός αρχείου καταγραφής γραμμή προς γραμμή
  const logEntries = [
    { timestamp: '...', level: 'INFO', message: '...' },
    { timestamp: '...', level: 'ERROR', message: '...' },
    { timestamp: '...', level: 'WARNING', message: '...' },
    { timestamp: '...', level: 'INFO', message: '...' },
    { timestamp: '...', level: 'ERROR', message: '...' }
  ];

  for (const entry of logEntries) {
    await new Promise(resolve => setTimeout(resolve, 50));
    yield entry;
  }
}

async function processLogs() {
  const logEntries = readLogFile('path/to/log/file.log');
  const errorAndWarningLogs = logEntries.filter(async (entry) => {
    return entry.level === 'ERROR' || entry.level === 'WARNING';
  });

  for await (const log of errorAndWarningLogs) {
    console.log(log);
  }
}

3. `take()`

Ο βοηθός take() δημιουργεί μια νέα Ασύγχρονη Γεννήτρια που παράγει μόνο τις πρώτες n τιμές από την αρχική ακολουθία. Είναι χρήσιμος για τον περιορισμό του αριθμού των στοιχείων που επεξεργάζονται από μια δυνητικά άπειρη ή πολύ μεγάλη ροή.

Σύνταξη:


asyncGenerator.take(n)

Παράδειγμα: Λήψη των 3 πρώτων αριθμών από μια ροή αριθμών.


async function* generateNumbers(start) {
  let i = start;
  while (true) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i++;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1);
  const firstThree = numbers.take(3);

  for await (const num of firstThree) {
    console.log(num);
  }
}

processNumbers();

Πραγματική Περίπτωση Χρήσης: Εμφάνιση των 5 κορυφαίων αποτελεσμάτων αναζήτησης από ένα ασύγχρονο API αναζήτησης.


async function* search(query) {
  // Προσομοίωση ανάκτησης αποτελεσμάτων αναζήτησης από ένα API
  const results = [
    { title: 'Result 1', url: '...' },
    { title: 'Result 2', url: '...' },
    { title: 'Result 3', url: '...' },
    { title: 'Result 4', url: '...' },
    { title: 'Result 5', url: '...' },
    { title: 'Result 6', url: '...' }
  ];

  for (const result of results) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield result;
  }
}

async function displayTopSearchResults(query) {
  const searchResults = search(query);
  const top5Results = searchResults.take(5);

  for await (const result of top5Results) {
    console.log(result);
  }
}

4. `drop()`

Ο βοηθός drop() δημιουργεί μια νέα Ασύγχρονη Γεννήτρια που παραλείπει τις πρώτες n τιμές από την αρχική ακολουθία και παράγει τις υπόλοιπες τιμές. Είναι το αντίθετο της take() και είναι χρήσιμος για την παράβλεψη των αρχικών τμημάτων μιας ροής.

Σύνταξη:


asyncGenerator.drop(n)

Παράδειγμα: Παράλειψη των 2 πρώτων αριθμών από μια ροή αριθμών.


async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  const remainingNumbers = numbers.drop(2);

  for await (const num of remainingNumbers) {
    console.log(num);
  }
}

processNumbers();

Πραγματική Περίπτωση Χρήσης: Σελιδοποίηση ενός μεγάλου συνόλου δεδομένων που ανακτάται από ένα API, παραλείποντας τα αποτελέσματα που έχουν ήδη εμφανιστεί.


async function* fetchData(url, pageSize, pageNumber) {
  const offset = (pageNumber - 1) * pageSize;
  // Προσομοίωση ανάκτησης δεδομένων με offset
  const data = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
    { id: 4, name: 'Item 4' },
    { id: 5, name: 'Item 5' },
    { id: 6, name: 'Item 6' },
    { id: 7, name: 'Item 7' },
    { id: 8, name: 'Item 8' }
  ];

  const pageData = data.slice(offset, offset + pageSize);

  for (const item of pageData) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield item;
  }
}

async function displayPage(pageNumber) {
  const pageSize = 3;
  const allData = fetchData('api/data', pageSize, pageNumber);
  const page = allData.drop((pageNumber - 1) * pageSize);  // παράλειψη στοιχείων από προηγούμενες σελίδες

  const results = page.take(pageSize);


  for await (const item of results) {
    console.log(item);
  }
}

// Παράδειγμα χρήσης
displayPage(2);

5. `flatMap()`

Ο βοηθός flatMap() μετασχηματίζει κάθε τιμή στην ασύγχρονη ακολουθία εφαρμόζοντας μια συνάρτηση που επιστρέφει ένα Async Iterable. Στη συνέχεια, ισοπεδώνει (flattens) το προκύπτον Async Iterable σε μία μόνο Ασύγχρονη Γεννήτρια. Αυτό είναι χρήσιμο για τον μετασχηματισμό κάθε τιμής σε μια ροή τιμών και στη συνέχεια το συνδυασμό αυτών των ροών.

Σύνταξη:


asyncGenerator.flatMap(callback)

Παράδειγμα: Μετασχηματισμός μιας ροής προτάσεων σε μια ροή λέξεων.


async function* generateSentences() {
  const sentences = [
    'This is the first sentence.',
    'This is the second sentence.',
    'This is the third sentence.'
  ];

  for (const sentence of sentences) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield sentence;
  }
}

async function* stringToWords(sentence) {
    const words = sentence.split(' ');
    for (const word of words) {
        await new Promise(resolve => setTimeout(resolve, 50));
        yield word;
    }
}

async function processSentences() {
  const sentences = generateSentences();
  const words = sentences.flatMap(async (sentence) => {
      return stringToWords(sentence);
  });

  for await (const word of words) {
    console.log(word);
  }
}

processSentences();

Πραγματική Περίπτωση Χρήσης: Ανάκτηση σχολίων για πολλαπλές αναρτήσεις ιστολογίου και συνδυασμός τους σε μία ενιαία ροή για επεξεργασία.


async function* fetchBlogPostIds() {
  const blogPostIds = [1, 2, 3]; // Προσομοίωση ανάκτησης αναγνωριστικών αναρτήσεων ιστολογίου από ένα API
  for (const id of blogPostIds) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield id;
  }
}

async function* fetchCommentsForPost(postId) {
  // Προσομοίωση ανάκτησης σχολίων για μια ανάρτηση ιστολογίου από ένα API
  const comments = [
    { postId: postId, text: `Comment 1 for post ${postId}` },
    { postId: postId, text: `Comment 2 for post ${postId}` }
  ];
  for (const comment of comments) {
    await new Promise(resolve => setTimeout(resolve, 50));
    yield comment;
  }
}

async function processComments() {
  const postIds = fetchBlogPostIds();
  const allComments = postIds.flatMap(async (postId) => {
    return fetchCommentsForPost(postId);
  });

  for await (const comment of allComments) {
    console.log(comment);
  }
}

6. `reduce()`

Ο βοηθός reduce() εφαρμόζει μια συνάρτηση σε έναν συσσωρευτή (accumulator) και σε κάθε τιμή της Ασύγχρονης Γεννήτριας (από αριστερά προς τα δεξιά) για να τη μειώσει σε μία μόνο τιμή. Αυτό είναι χρήσιμο για τη συγκέντρωση δεδομένων από μια ασύγχρονη ροή.

Σύνταξη:


asyncGenerator.reduce(callback, initialValue)

Παράδειγμα: Υπολογισμός του αθροίσματος των αριθμών σε μια ροή.


async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  const sum = await numbers.reduce(async (accumulator, num) => {
    await new Promise(resolve => setTimeout(resolve, 100));
    return accumulator + num;
  }, 0);

  console.log('Sum:', sum);
}

processNumbers();

Πραγματική Περίπτωση Χρήσης: Υπολογισμός του μέσου χρόνου απόκρισης μιας σειράς κλήσεων API.


async function* fetchResponseTimes(apiEndpoints) {
  for (const endpoint of apiEndpoints) {
    const startTime = Date.now();
    try {
      await fetch(endpoint);
      const endTime = Date.now();
      const responseTime = endTime - startTime;
      await new Promise(resolve => setTimeout(resolve, 50));
      yield responseTime;
    } catch (error) {
      console.error(`Error fetching ${endpoint}: ${error}`);
      yield 0; // Ή διαχειριστείτε το σφάλμα κατάλληλα
    }
  }
}

async function calculateAverageResponseTime() {
  const apiEndpoints = [
    'https://api.example.com/endpoint1',
    'https://api.example.com/endpoint2',
    'https://api.example.com/endpoint3'
  ];
  const responseTimes = fetchResponseTimes(apiEndpoints);

  let count = 0;
  const sum = await responseTimes.reduce(async (accumulator, time) => {
    count++;
    return accumulator + time;
  }, 0);

  const average = count > 0 ? sum / count : 0;
  console.log(`Average response time: ${average} ms`);
}

7. `toArray()`

Ο βοηθός toArray() καταναλώνει την Ασύγχρονη Γεννήτρια και επιστρέφει μια υπόσχεση (promise) που επιλύεται σε έναν πίνακα που περιέχει όλες τις τιμές που παρήγαγε η γεννήτρια. Αυτό είναι χρήσιμο όταν χρειάζεται να συλλέξετε όλες τις τιμές από τη ροή σε έναν ενιαίο πίνακα για περαιτέρω επεξεργασία.

Σύνταξη:


asyncGenerator.toArray()

Παράδειγμα: Συλλογή αριθμών από μια ροή σε έναν πίνακα.


async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  const numberArray = await numbers.toArray();

  console.log('Number Array:', numberArray);
}

processNumbers();

Πραγματική Περίπτωση Χρήσης: Συλλογή όλων των στοιχείων από ένα σελιδοποιημένο API σε έναν ενιαίο πίνακα για φιλτράρισμα ή ταξινόμηση από την πλευρά του πελάτη (client-side).


async function* fetchAllItems(apiEndpoint) {
    let pageNumber = 1;
    const pageSize = 100;  // Προσαρμόστε ανάλογα με τα όρια σελιδοποίησης του API

    while (true) {
        const url = `${apiEndpoint}?page=${pageNumber}&pageSize=${pageSize}`;
        const response = await fetch(url);
        const data = await response.json();

        if (!data || data.length === 0) {
            break; // Δεν υπάρχουν άλλα δεδομένα
        }

        for (const item of data) {
            await new Promise(resolve => setTimeout(resolve, 50));
            yield item;
        }

        pageNumber++;
    }
}

async function processAllItems() {
    const apiEndpoint = 'https://api.example.com/items';
    const allItems = fetchAllItems(apiEndpoint);
    const itemsArray = await allItems.toArray();

    console.log(`Fetched ${itemsArray.length} items.`);
    // Η περαιτέρω επεξεργασία μπορεί να πραγματοποιηθεί στον `itemsArray`
}

8. `forEach()`

Ο βοηθός forEach() εκτελεί μια παρεχόμενη συνάρτηση μία φορά για κάθε τιμή στην Ασύγχρονη Γεννήτρια. Σε αντίθεση με άλλους βοηθούς, η forEach() δεν επιστρέφει μια νέα Ασύγχρονη Γεννήτρια. χρησιμοποιείται για την εκτέλεση παρενεργειών (side effects) σε κάθε τιμή.

Σύνταξη:


asyncGenerator.forEach(callback)

Παράδειγμα: Καταγραφή κάθε αριθμού σε μια ροή στην κονσόλα.


async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  await numbers.forEach(async (num) => {
    await new Promise(resolve => setTimeout(resolve, 100));
    console.log('Number:', num);
  });
}

processNumbers();

Πραγματική Περίπτωση Χρήσης: Αποστολή ενημερώσεων σε πραγματικό χρόνο σε ένα περιβάλλον εργασίας χρήστη (UI) καθώς τα δεδομένα επεξεργάζονται από μια ροή.


async function* fetchRealTimeData(dataSource) {
    //Προσομοίωση ανάκτησης δεδομένων σε πραγματικό χρόνο (π.χ. τιμές μετοχών).
    const dataStream = [
      { timestamp: new Date(), price: 100 },
      { timestamp: new Date(), price: 101 },
      { timestamp: new Date(), price: 102 }
    ];
    for (const dataPoint of dataStream) {
      await new Promise(resolve => setTimeout(resolve, 500));
      yield dataPoint;
    }
}

async function updateUI() {
  const realTimeData = fetchRealTimeData('stock-api');
  await realTimeData.forEach(async (data) => {
    //Προσομοίωση ενημέρωσης του UI
    await new Promise(resolve => setTimeout(resolve, 100));
    console.log(`Updating UI with data: ${JSON.stringify(data)}`);
    // Ο κώδικας για την πραγματική ενημέρωση του UI θα έμπαινε εδώ.
  });
}

Συνδυασμός Βοηθών Ασύγχρονων Γεννητριών για Σύνθετες Διοχετεύσεις Δεδομένων

Η πραγματική δύναμη των Βοηθών Ασύγχρονων Γεννητριών πηγάζει από την ικανότητά τους να συνδυάζονται αλυσιδωτά για τη δημιουργία σύνθετων διοχετεύσεων δεδομένων (data pipelines). Αυτό σας επιτρέπει να εκτελείτε πολλαπλούς μετασχηματισμούς και λειτουργίες σε μια ασύγχρονη ροή με συνοπτικό και ευανάγνωστο τρόπο.

Παράδειγμα: Φιλτράρισμα μιας ροής αριθμών για να συμπεριληφθούν μόνο οι ζυγοί αριθμοί, στη συνέχεια ύψωσή τους στο τετράγωνο και τέλος λήψη των 3 πρώτων αποτελεσμάτων.


async function* generateNumbers(start) {
  let i = start;
  while (true) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield i++;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1);

  const processedNumbers = numbers
    .filter(async (num) => num % 2 === 0)
    .map(async (num) => num * num)
    .take(3);

  for await (const num of processedNumbers) {
    console.log(num);
  }
}

processNumbers();

Πραγματική Περίπτωση Χρήσης: Ανάκτηση δεδομένων χρηστών, φιλτράρισμα χρηστών με βάση την τοποθεσία τους, μετασχηματισμός των δεδομένων τους για να συμπεριληφθούν μόνο τα σχετικά πεδία και, στη συνέχεια, εμφάνιση των πρώτων 10 χρηστών σε έναν χάρτη.


async function* fetchUsers() {
  // Προσομοίωση ανάκτησης χρηστών από μια βάση δεδομένων ή API
  const users = [
    { id: 1, name: 'John Doe', location: 'New York', email: 'john.doe@example.com' },
    { id: 2, name: 'Jane Smith', location: 'London', email: 'jane.smith@example.com' },
    { id: 3, name: 'Ken Tan', location: 'Singapore', email: 'ken.tan@example.com' },
    { id: 4, name: 'Alice Jones', location: 'New York', email: 'alice.jones@example.com' },
    { id: 5, name: 'Bob Williams', location: 'London', email: 'bob.williams@example.com' },
    { id: 6, name: 'Siti Rahman', location: 'Singapore', email: 'siti.rahman@example.com' },
    { id: 7, name: 'Ahmed Khan', location: 'Dubai', email: 'ahmed.khan@example.com' },
    { id: 8, name: 'Maria Garcia', location: 'Madrid', email: 'maria.garcia@example.com' },
    { id: 9, name: 'Li Wei', location: 'Shanghai', email: 'li.wei@example.com' },
    { id: 10, name: 'Hans Müller', location: 'Berlin', email: 'hans.muller@example.com' },
    { id: 11, name: 'Emily Chen', location: 'Sydney', email: 'emily.chen@example.com' }
  ];

  for (const user of users) {
    await new Promise(resolve => setTimeout(resolve, 50));
    yield user;
  }
}

async function displayUsersOnMap(location, maxUsers) {
  const users = fetchUsers();

  const usersForMap = users
    .filter(async (user) => user.location === location)
    .map(async (user) => ({
      id: user.id,
      name: user.name,
      location: user.location
    }))
    .take(maxUsers);

  console.log(`Displaying up to ${maxUsers} users from ${location} on the map:`);
  for await (const user of usersForMap) {
    console.log(user);
  }
}

// Παραδείγματα χρήσης:
displayUsersOnMap('New York', 2);
displayUsersOnMap('London', 5);

Polyfills και Υποστήριξη από Προγράμματα Περιήγησης

Η υποστήριξη για τους Βοηθούς Ασύγχρονων Γεννητριών μπορεί να διαφέρει ανάλογα με το περιβάλλον JavaScript. Εάν χρειάζεται να υποστηρίξετε παλαιότερα προγράμματα περιήγησης ή περιβάλλοντα, μπορεί να χρειαστεί να χρησιμοποιήσετε polyfills. Ένα polyfill παρέχει την ελλιπή λειτουργικότητα υλοποιώντας την σε JavaScript. Υπάρχουν αρκετές βιβλιοθήκες polyfill διαθέσιμες για τους Βοηθούς Ασύγχρονων Γεννητριών, όπως η core-js.

Παράδειγμα με χρήση core-js:


// Εισαγωγή των απαραίτητων polyfills
require('core-js/features/async-iterator/map');
require('core-js/features/async-iterator/filter');
// ... εισαγωγή άλλων απαραίτητων βοηθών

Διαχείριση Σφαλμάτων

Όταν εργάζεστε με ασύγχρονες λειτουργίες, είναι ζωτικής σημασίας η σωστή διαχείριση των σφαλμάτων. Με τους Βοηθούς Ασύγχρονων Γεννητριών, η διαχείριση σφαλμάτων μπορεί να γίνει χρησιμοποιώντας μπλοκ try...catch μέσα στις ασύγχρονες συναρτήσεις που χρησιμοποιούνται στους βοηθούς.

Παράδειγμα: Διαχείριση σφαλμάτων κατά την ανάκτηση δεδομένων μέσα σε μια λειτουργία map().


async function* fetchData(urls) {
  for (const url of urls) {
    try {
      const response = await fetch(url);
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      const data = await response.json();
      yield data;
    } catch (error) {
      console.error(`Error fetching data from ${url}: ${error}`);
      yield null; // Ή διαχειριστείτε το σφάλμα κατάλληλα, π.χ., παράγοντας ένα αντικείμενο σφάλματος
    }
  }
}

async function processData() {
  const urls = [
    'https://api.example.com/data1',
    'https://api.example.com/data2',
    'https://api.example.com/data3'
  ];

  const dataStream = fetchData(urls);

  const processedData = dataStream.map(async (data) => {
    if (data === null) {
      return null; // Διάδοση του σφάλματος
    }
    // Επεξεργασία των δεδομένων
    return data;
  });

  for await (const item of processedData) {
    if (item === null) {
      console.log('Skipping item due to error');
      continue;
    }
    console.log('Processed Item:', item);
  }
}

processData();

Βέλτιστες Πρακτικές και Σκέψεις

Νωθρή Αξιολόγηση (Lazy Evaluation): Οι Βοηθοί Ασύγχρονων Γεννητριών αξιολογούνται νωθρά, πράγμα που σημαίνει ότι επεξεργάζονται δεδομένα μόνο όταν ζητηθούν. Αυτό μπορεί να βελτιώσει την απόδοση, ειδικά όταν έχετε να κάνετε με μεγάλα σύνολα δεδομένων.
Διαχείριση Σφαλμάτων: Πάντα να διαχειρίζεστε σωστά τα σφάλματα μέσα στις ασύγχρονες συναρτήσεις που χρησιμοποιούνται στους βοηθούς.
Polyfills: Χρησιμοποιήστε polyfills όταν είναι απαραίτητο για την υποστήριξη παλαιότερων προγραμμάτων περιήγησης ή περιβαλλόντων.
Αναγνωσιμότητα: Χρησιμοποιήστε περιγραφικά ονόματα μεταβλητών και σχόλια για να κάνετε τον κώδικά σας πιο ευανάγνωστο και συντηρήσιμο.
Απόδοση: Να έχετε υπόψη τις επιπτώσεις στην απόδοση από την αλυσιδωτή σύνδεση πολλαπλών βοηθών. Ενώ η νωθρή αξιολόγηση βοηθά, η υπερβολική αλυσιδωτή σύνδεση μπορεί ακόμα να προσθέσει επιβάρυνση.

Συμπέρασμα

Οι Βοηθοί Ασύγχρονων Γεννητριών της JavaScript παρέχουν έναν ισχυρό και κομψό τρόπο για τη δημιουργία, τον μετασχηματισμό και τη διαχείριση ασύγχρονων ροών δεδομένων. Αξιοποιώντας αυτούς τους βοηθούς, οι προγραμματιστές μπορούν να γράψουν πιο συνοπτικό, ευανάγνωστο και συντηρήσιμο κώδικα για τον χειρισμό σύνθετων ασύγχρονων λειτουργιών. Η κατανόηση των βασικών αρχών των Ασύγχρονων Γεννητριών και Επαναληπτών, μαζί με τις λειτουργίες κάθε βοηθού, είναι απαραίτητη για την αποτελεσματική χρήση αυτών των εργαλείων σε πραγματικές εφαρμογές. Είτε δημιουργείτε διοχετεύσεις δεδομένων, επεξεργάζεστε δεδομένα σε πραγματικό χρόνο ή διαχειρίζεστε ασύγχρονες αποκρίσεις API, οι Βοηθοί Ασύγχρονων Γεννητριών μπορούν να απλοποιήσουν σημαντικά τον κώδικά σας και να βελτιώσουν τη συνολική του απόδοση.